<template>
  <div class="flex justify-center relative w-full h-full">
    <dv-full-screen-container v-if="Loading" class="loading"><dv-loading></dv-loading></dv-full-screen-container>
    <template v-else>

      <div class="absolute left-[20px] top-[20px] " v-if="nowIndex == 0 && childrenItemIndex != 6">
        <img class="w-[46px] h-[40px] cursor-pointer" @click="isShowTopVideo = !isShowTopVideo"
          src="../../assets/jiankong.png" alt="">


        <!--  -->

        <div v-if="isShowTopVideo && childrenchildrenVideo"
          class="w-[517px] h-[293px] tanKuang flex justify-center items-center relative p-[6px]">
          <template v-for="(item, index) in videoArr" :key="item.id">
            <xiguavideoFlv v-if="childrenchildrenVideo.id === item.id" controls :url="childrenchildrenVideo.httpaddress"
              :id="childrenchildrenVideo.id + 'videoTop'">
            </xiguavideoFlv>
          </template>

          <div class="absolute left-[8px] top-[8px] right-[8px] flex justify-between ">
            <div style='background: linear-gradient(90deg, rgba(3,27,55,0.5) 0%, rgba(3,27,55,0) 100%);'
              class="w-[172px] h-[28px] text-[14px] text-white pl-[8px] flex items-center">
              {{ childrenchildrenVideo.jkwz }}
            </div>
          </div>


        </div>






      </div>





      <div style="transition: all 0.8s;"
        :class="[isShow ? 'right-[434px] icon_img1' : 'right-[24px]', childrenItemIndex > 6 ? 'three_out my-element' : 'three_go',]"
        class="absolute    w-[66px] h-[88px] animate__animated flex flex-col z-9999">
        <div class="flex-1 flex flex-col items-center justify-center" @click="isShowFn()">
          <img class="w-[42px] h-[42px] mb-[8px]" :src="isShow ? shou : zhankia" alt="">
          <span class="text-[14px] text-white" v-if="isShow">
            {{ isShow ? '收起' : '展开' }}
          </span>
        </div>
      </div>



      <siren style="transition: all 0.8s;" class="absolute animate__animated right-[512px]"
        :class="isShow && nowIndex == 0 ? 'three_go' : 'three_out my-element'"></siren>
      <div style="transition: all 0.8s;" :class="isShow && nowIndex == 0 ? 'one_go' : 'one_out my-element'"
        class="absolute  right-[434px] icon_img w-[66px] h-[177px] animate__animated flex flex-col">
        <div class="flex-1 flex flex-col items-center justify-center" @click="setType(1)">
          <img class="w-[42px] h-[42px] mb-[8px]" :src="type1 ? img1 : img2" alt="">
          <span class="text-[14px] text-white">
            全部
          </span>
        </div>
        <div class="flex-1 flex flex-col items-center justify-center" @click="setType(2)">
          <img class="w-[42px] h-[42px] mb-[8px]" :src="type2 ? img4 : img3" alt="">
          <span class="text-[14px] text-white">
            传感器
          </span>
        </div>
      </div>


      <div style="transition: all 0.5s;" :class="isShow && nowIndex == 0 ? 'two_go' : 'two_out my-element'"
        class="absolute  right-[434px] icon_img1 w-[66px] h-[88px] animate__animated flex flex-col">

        <div class="flex-1 flex flex-col items-center justify-center" @click="setType(3)">
          <img class="w-[42px] h-[42px] mb-[8px]" :src="type3 ? img6 : img5" alt="">
          <span class="text-[14px] text-white">
            {{ type3 ? '返回' : '漫游' }}
          </span>
        </div>


        <!-- <div class="flex-1 flex flex-col items-center justify-center" @click="setType(3)">
          <img class="w-[42px] h-[42px] mb-[8px]" :src="type3 ? zhankia : shou" alt="">
          <span class="text-[14px] text-white">
            展开
          </span>
        </div> -->





      </div>


      <div class="absolute left-0 right-0 bottom-0 top-0 flex justify-center items-center z-40" style="" v-if="openVide"
        @click="openVide = false">
        <div class="w-[808px] h-[458px] tanKuang flex justify-center items-center relative p-[6px]" @click.stop="">
          <!-- <img class="w-full h-full" :src="activerVideo.poster" alt=""> -->
          <template v-for="(item, index) in videoArr" :key="item.id">
            <xiguavideoFlv controls :url="item.httpaddress" :id="item.id + 'video'" v-if="activerVideo.id === item.id">
            </xiguavideoFlv>
            <div class="absolute left-[8px] top-[8px] right-[8px] flex justify-between "
              v-if="activerVideo.id === item.id">
              <div style='background: linear-gradient(90deg, rgba(3,27,55,0.5) 0%, rgba(3,27,55,0) 100%);'
                class="w-[172px] h-[28px] text-[14px] text-white pl-[8px] flex items-center">
                {{ item.jkwz }}
              </div>
              <div style="background: rgba(3,27,55,0.8);" @click="openVide = false" class="w-[28px] h-[28px]">
                <img class="w-[28px] h-[28px] " src="../../assets/two/x@2x.png" alt="">
              </div>
            </div>
          </template>

        </div>
      </div>




      <template v-if="nowIndex == 0">

        <div :class="isShow && nowIndex == 0 && isShowTuli ? 'animate__flipInY' : '  animate__flipOutY '"
          class="absolute right-[462px] w-[164px] h-[304px] bottom-[160px] animate__animated flex">
          <img @click="isShowTuli = false" class="w-[20px] h-[40px] mr-[8px]" src="../../assets/shou.png" alt="">

          <img class="w-[164px] h-[304px]" src="../../assets/tuli1.png" alt="">
        </div>
      </template>

      <template v-if="nowIndex == 2">
        <div :class="isShow && nowIndex == 2 && isShowTuli ? 'animate__flipInY' : '  animate__flipOutY '"
          class="absolute right-[435px] w-[216px] h-[112px] bottom-[160px] animate__animated flex">
          <img @click="isShowTuli = false" class="w-[20px] h-[40px] mr-[8px]" src="../../assets/shou.png" alt="">

          <img class="w-full h-full" src="../../assets/tuli2.png" alt="">
        </div>
      </template>

      <template v-if="nowIndex == 5">
        <div :class="isShow && nowIndex == 5 && isShowTuli ? 'animate__flipInY' : '  animate__flipOutY '"
          class="absolute right-[462px] w-[164px]  bottom-[160px] animate__animated flex">
          <img @click="isShowTuli = false" class="w-[20px] h-[40px] mr-[8px]" src="../../assets/shou.png" alt="">
          <img class="w-full h-full" src="../../assets/tuli3.png" alt="">
        </div>
      </template>


      <div v-if="!isShowTuli" @click="isShowTuli = true"
        class="animate__animated absolute right-[462px] bottom-[160px] "
        :class="isShowTuli ? 'animate__hinge' : 'animate__fadeInUp'">
        <img class="w-[40px] h-[40px] mr-[8px] " src="../../assets/kai.png" alt="">
      </div>


      <!-- one -->
      <leftcommoun :nowIndex="nowIndex" :isShow='isShow' webID="0">
        <left1></left1>
      </leftcommoun>

      <rightcommon :nowIndex="nowIndex" :isShow='isShow' webID="0">
        <right1></right1>
      </rightcommon>
      <!-- one -->


      <!-- two -->
      <leftcommoun :nowIndex="nowIndex" :isShow='isShow' webID="1">
        <left2></left2>
      </leftcommoun>

      <rightcommon :nowIndex="nowIndex" :isShow='isShow' webID="1" class="z-50">
        <right2></right2>
      </rightcommon>
      <!-- two -->

      <!-- three -->
      <leftcommoun :nowIndex="nowIndex" :isShow='isShow' webID="2">
        <left3></left3>
      </leftcommoun>

      <rightcommon :nowIndex="nowIndex" :isShow='isShow' webID="2">
        <right3></right3>
      </rightcommon>
      <!-- three -->


      <!-- four -->
      <leftcommoun :nowIndex="nowIndex" :isShow='isShow' webID="3">
        <left4></left4>
      </leftcommoun>

      <rightcommon :nowIndex="nowIndex" :isShow='isShow' webID="3">
        <right4></right4>
      </rightcommon>
      <!-- four -->

      <!-- five -->
      <leftcommoun :nowIndex="nowIndex" :isShow='isShow' webID="4">
        <left5></left5>
      </leftcommoun>

      <rightcommon :nowIndex="nowIndex" :isShow='isShow' webID="4">
        <right5></right5>
      </rightcommon>
      <!-- five -->

      <!-- six -->
      <leftcommoun :nowIndex="nowIndex" :isShow='isShow' webID="5">
        <left6></left6>
      </leftcommoun>

      <rightcommon :nowIndex="nowIndex" :isShow='isShow' webID="5">
        <right6></right6>
      </rightcommon>
      <!-- six -->



      <!-- bottom  animate__animated animate__fadeInUp-->
      <div v-if="children.length > 0" :class="children.length > 0 ? 'around' : ''"
        class="absolute bottom-[88px] left-[420px] w-[1080px] h-[60px] children_box flex items-center justify-center gap-[12px]   ">
        <div @click="tapChildren(i, n)"
          class="w-[124px] h-[32px] flex justify-center items-center z-[99999] cursor-pointer"
          v-for="(i, n) in children" :key="n"
          :class="childrenItemIndex === i.webID ? 'children_activer' : 'children_noactiver'">
          <div :class="childrenItemIndex === i.webID ? 'children_activer1' : 'children_noactiver1'">
            {{ i.name }}
          </div>
        </div>
      </div>
      <!-- tab  -->
      <div class="absolute bottom-0 left-0 right-0 flex justify-center h-[66px]">
        <div class="bottom_box flex justify-center items-center h-[66px]">
          <div @click="tapitem(item, index)" class="text-box cursor-pointer"
            :class="nowIndex === item.webID ? 'activer' : 'noactiver'" v-for="(item, index) in list" :key="index">{{
      item.name }}
          </div>
        </div>
      </div>
    </template>

  </div>
</template>
<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useUserStore } from '~/store/login'
import left1 from '../../components/left1.vue'
import left2 from '../../components/left2.vue'
import left3 from '../../components/left3.vue'
import left4 from '../../components/left4.vue'
import left5 from '../../components/left5.vue'
import left6 from '../../components/left6.vue'
import leftcommoun from '../../components/leftcommoun.vue'
import rightcommon from '../../components/rightcommon.vue'
import right1 from '../../components/right1.vue'
import right2 from '../../components/right2.vue'
import right3 from '../../components/right3.vue'
import right4 from '../../components/right4.vue'
import right5 from '../../components/right5.vue'
import right6 from '../../components/right6.vue'
import img1 from '../../assets/one/12-7.png'
import img2 from '../../assets/one/12-8.png'
import img3 from '../../assets/one/12-9.png'
import img4 from '../../assets/one/12-10.png'
import img5 from '../../assets/one/12-11.png'
import img6 from '../../assets/one/12-12.png'
import siren from '../../components/siren.vue'
import xiguavideoFlv from '../../components/xiguavideoFlv.vue'
import zhankia from '../../assets/one/zhan.png'
import shou from '../../assets/one/shou.png'

import { sxtselti, getAppsfsq, setAppcxsq } from '../../api/home.js'

import { type1, type2, type3, setType, activerVideo, openVide, getAppInfo, Loading, getError, videoArr, getData1, getData3, getData4, getData5, getData6 } from './index'

import { ElMessage, ElMessageBox } from 'element-plus'


const getAppInfoFn = () => {
  getAppsfsq().then(res => {
    if (res.data.result == 'false') {  //false未到期
      console.log(res.data.result, 'truettttt')
      getAppInfo()
      getError()

    } else {


      ElMessageBox.prompt('请填写授权码', '服务异常，请联系管理员解决', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        inputErrorMessage: 'Invalid Email',
      })
        .then(({ value }) => {
          let Q = {
            "kl": "ryl123456",
            "sqm": value
          }
          setAppcxsq(Q).then(res => {

            setTimeout(() => {
              window.location.reload();
            }, 500);

          })



        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '服务异常，请联系管理员解决',
          })
        })




    }
  })
}



getAppInfoFn()


const isShowTuli = ref(true)


const userStore = useUserStore()


const list = ref([
  {
    name: '首页',
    webID: 0,
    children: [
      { name: '总览', webID: 6 },
      { name: '发电机房', webID: 7 },
      { name: '电站控制室', webID: 8 },
      { name: '总控室', webID: 9 },
      { name: '空调机房', webID: 10 },
      { name: '污水泵房', webID: 11 },
      { name: '作战指挥室', webID: 12 },
    ]
  },
  {
    name: '视频监控系统',
    webID: 1,
    children: []
  },
  {
    name: '通风空调系统',
    children: [],
    webID: 2,


  },
  {
    name: '给排水系统',
    children: [],
    webID: 3,

  },
  {
    name: '供配电系统',
    children: [],
    webID: 4,

  },
  {
    name: '消防系统',
    children: [],
    webID: 5,
  },
])

const nowIndex = ref(0)

const children = computed(() => list.value[nowIndex.value].children)


const isShowTopVideo = ref(true)
const childrenchildrenVideo = computed(() => videoArr.value.find(v => v?.qdxz == childrenItemIndex.value))







const tapitem = (item, index) => {
  nowIndex.value = item.webID

  console.log(nowIndex.value, 'nowIndex')
  isShow.value = true
  isShowTuli.value = true

  type1.value = false
  type2.value = false

  childrenItemIndex.value = 6
  let ueID = String(item.webID)
  ue4("QuestPosition", {
    "PositionName": ueID
  })
}

const isShow = ref(true)


const childrenItemIndex = ref(6)

const tapChildren = (i, n) => {
  childrenItemIndex.value = i.webID
  console.log(childrenItemIndex.value, 'childrenItemIndex.value')
  if (childrenItemIndex.value == 6) {
    isShow.value = true
  } else {
    isShow.value = false
  }

  type1.value = false
  type2.value = false
  let ueID = String(i.webID)
  ue4("QuestPosition", {
    "PositionName": ueID
  })
}

const getUEParams = (val) => {
  let obj
  if (val) {
    obj = JSON.parse(val)
  }
  let params = {
    name: '张三',
    val: obj
  }
  userStore.getList(JSON.stringify(params))
}



const timer = ref(null)  // 轮询错误定时器
const timeInterval = ref(null)  // 轮询数据定时器
const timeRef = ref(null)  // 修改时间定时器

const intervaltTime = ref(7000)


const getTime = () => {
  sxtselti().then(res => {
    let oldTime = intervaltTime.value
    intervaltTime.value = res.data.result[0].ti * 1000 ?? 7000
    if (timeInterval.value && oldTime == intervaltTime.value) return
    if (timeInterval.value) {
      clearInterval(timeInterval.value)
    }

    timeInterval.value = setInterval(() => {
      console.log('轮询', intervaltTime.value)
      switch (nowIndex.value) {
        case 0:
          getData1()
          break;
        case 2:
          getData3()
          break;
        case 3:
          getData4()
          break;
        case 4:
          getData5()
          break;
        case 5:
          getData6()
          break;

      }
    }, intervaltTime.value)

  })
}



onMounted(() => {

  ue.interface.UE5CallFunc = (val) => {
    getUEParams(val)
  }


  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
  timer.value = setInterval(() => {
    console.log('轮询报警')
    getError()
  }, 5000)




  if (timeRef.value) {
    clearInterval(timeRef.value)
    timeRef.value = null
  }
  timeRef.value = setInterval(() => {
    console.log('轮询获取时间')
    getTime()
  }, 20000)



  ue.interface.CustomFunction = function (sxtid) {
    let temporaryItem = videoArr.value.find(v => v.sxtid == sxtid)
    if (temporaryItem) {
      activerVideo.value = temporaryItem
      openVide.value = true
    }
  }

})

onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }

  if (timeInterval.value) {
    clearInterval(timeInterval.value)
    timeInterval.value = null
  }

  if (timeRef.value) {
    clearInterval(timeRef.value)
    timeRef.value = null
  }



})

const isShowFn = () => {
  if (nowIndex.value == 0 && childrenItemIndex.value > 6) {
    return
  }
  isShow.value = !isShow.value
}




</script>
<style>
:root {
  --animate-delay: 0;
  --animate-duration: 2s;
}

.my-element {
  --animate-duration: 0.8s;
}

.my-element—in {
  --animate-duration: 0.5s;
}

.tanKuang {
  background-image: url(../../assets/two/bgtan.png);
  background-size: 100% 100%;
}

@keyframes transfromAnimatein {
  from {
    opacity: 0;
    bottom: 40px;
  }

  to {
    opacity: 1;
    bottom: 88px;
  }
}

.around {
  animation: transfromAnimatein 0.8s;
}

@keyframes transfromAnimateout {
  from {
    opacity: 1;
    bottom: 88px;
  }

  to {
    opacity: 0;
    bottom: 40px;
  }
}

.aroundout {
  animation: transfromAnimateout 0.8s;
}








.bottom_box {
  background-image: url(../../assets/footer.png);
  background-size: 100% 100%;
  width: 1544px;
  height: 66px;
}

.text-box {
  font-size: 14px;
  width: 116px;
  height: 33px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  line-height: 14px;
  margin: 0 12px;

}

.noactiver {
  background-image: url(../../assets/footer1.png) !important;
  background-size: 100% 100%;
  color: #00AAFF !important;
}

.activer {
  background-image: url(../../assets/footer2.png) !important;
  background-size: 100% 100%;
  color: #FF9900 !important;
}

.noShowLeft {
  left: -430px;
}

.noShowright {
  right: -430px;
}

.children_box {
  background-image: url(../../assets/bottom.png);
  background-size: 100% 100%;
}

.children_activer {
  background-image: url(../../assets/footer4.png);
  background-size: 100% 100%;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  line-height: 14px;
}

.children_noactiver {
  background-image: url(../../assets/footer3.png);
  background-size: 100% 100%;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  line-height: 14px;
}

.children_activer1 {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFCC80 100%);
  -webkit-background-clip: text;
  color: transparent;
}

.children_noactiver1 {

  background: linear-gradient(180deg, #FFFFFF 0%, #80D4FF 100%);
  -webkit-background-clip: text;
  color: transparent;
}


/* 旋转动画 */

.around_rotate {
  animation: rotate 1.5s linear 0.5s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}


.icon_img {
  background-image: url(../../assets/one/12-1.png);
  background-size: 100% 100%;
}

.icon_img1 {
  background-image: url(../../assets/one/12-2.png);
  background-size: 100% 100%;
}



@keyframes transfromAnimateintop {
  from {
    opacity: 0;
    top: -250px;
  }

  to {
    opacity: 1;
    top: 114px;
  }
}

.one_go {
  animation: transfromAnimateintop 0.8s;
}

@keyframes transfromAnimateouttop {
  from {
    opacity: 1;
    top: 114px;
  }

  to {
    opacity: 0;
    top: -250px;
  }
}

.one_out {
  animation: transfromAnimateouttop 0.8s;
}




@keyframes Animateintop {
  from {
    opacity: 0;
    top: -400px;
  }

  to {
    opacity: 1;
    top: 303px;
  }
}

.two_go {
  animation: Animateintop 0.8s;
}

@keyframes Animateouttop {
  from {
    opacity: 1;
    top: 303px;
  }

  to {
    opacity: 0;
    top: -400px;
  }
}

.two_out {
  animation: Animateouttop 0.8s;
}



@keyframes transfromAnimateintopthree_go {
  from {
    opacity: 0;
    top: -250px;
  }

  to {
    opacity: 1;
    top: 18px;
  }
}

.three_go {
  animation: transfromAnimateintopthree_go 0.8s;
}


@keyframes Animateouttopthree_go {
  from {
    opacity: 1;
    top: 18px;
  }

  to {
    opacity: 0;
    top: -400px;
  }
}

.three_out {
  animation: Animateouttopthree_go 0.8s;
}
</style>
